<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar :title="'购物车（' + cartStore.cartsGame.length + '）'" @click-left="onClickLeft" fixed>
    <template #left>
      <van-icon name="arrow-left" size="24" color="#000" />
    </template>
    <template #right>
      <van-popover v-model:show="showPopover" :actions="[{ text: '向左滑动可以删除商品哦' }]" placement="bottom-end" theme="dark">
        <template #reference>
          <van-icon name="ellipsis" size="24" color="#000" />
        </template>
      </van-popover>
    </template>
  </van-nav-bar>

  <div class="empty" v-if="cartStore.cartsGame.length === 0">
    <van-empty class="custom-image" image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="购物车中还没有商品哦~" />
  </div>

  <!-- 购物车列表 -->
  <div class="cart-container" v-else>
    <div class="game-list">
      <!-- title -->
      <div class="bar-1">
        <div class="title van-hairline--bottom">商品列表</div>
      </div>
      <!-- 列表 -->
      <div class="bar-2">
        <van-checkbox-group v-model="checked" ref="checkboxGroup">
          <template v-for="item in gameInfo">
            <van-swipe-cell>
              <div class="list-item">
                <van-checkbox :name="item" style="margin-right: 15px;" checked-color="#14191e"></van-checkbox>
                <div class="game-img">
                  <van-image width="150" height="75" radius="3px" :src="item.coverUrl" />
                </div>
                <div class="game-info">
                  <div class="row-1">
                    <p class="game-name">{{ item.gameName }}</p>
                    <p class="goods-describe">CDKEY发货</p>
                  </div>
                  <div class="row-2">
                    <span class="price-currency">￥</span>
                    <span class="game-price" style="margin-left: 2px;">{{ item.currentPrice }}</span>
                  </div>
                </div>
              </div>
              <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="deleteGame(item.gameId)" />
              </template>
            </van-swipe-cell>
          </template>
        </van-checkbox-group>
      </div>
    </div>
  </div>

  <!-- 提交订单栏 -->
  <van-submit-bar :price="finalPrice" button-text="去结算" @submit="onSubmit">
    <van-checkbox v-model="allCheckedBtn" @click="onChecked" checked-color="#14191e">全选</van-checkbox>
  </van-submit-bar>
</template>

<script setup>
import { Toast } from 'vant';
import { onMounted, ref, reactive, watch, computed, nextTick } from 'vue';

import { getGameDetail } from '../../network/gameDetail'
import router from '../../route';

import { useCartStore } from '../../store/shoppingCart';
import { useUserStore } from '../../store/user';

const cartStore = useCartStore()
const userStore = useUserStore()

const gameInfo = reactive([])
onMounted(() => {
  cartStore.cartsGame.forEach(item => {
    getGameDetail(item).then(res => {
      const { data: result } = res
      gameInfo.push(result)
    })
  })
})

// 购物车中被选中的游戏
const checked = ref([]);
const isAllChecked = ref(true)
const allCheckedBtn = ref(false)
const checkboxGroup = ref(null);
const onChecked = () => {
  checkboxGroup.value.toggleAll(isAllChecked.value);
  isAllChecked.value = !isAllChecked.value
}
// 监听选中的游戏，如果选择了所有游戏，则全选按钮亮起
watch(() => checked.value.length, (newValue, oldeValue) => {
  if (newValue === gameInfo.length) {
    allCheckedBtn.value = true
    isAllChecked.value = false
  } else {
    allCheckedBtn.value = false
    isAllChecked.value = true
  }
})
watch(() => gameInfo.length, (newValue, oldeValue) => {
  if (newValue === checked.value.length && newValue !== 0) {
    allCheckedBtn.value = true
    isAllChecked.value = false
  } else {
    allCheckedBtn.value = false
    isAllChecked.value = true
  }
})

// 删除购物车中的游戏
const deleteGame = (gameId) => {
  gameInfo.forEach((item, index) => {
    if (item.gameId === gameId) {
      gameInfo.splice(index, 1)
    }
  })
  checked.value.forEach((item, index) => {
    if (item.gameId === gameId) {
      checked.value.splice(index, 1)
    }
  })
  cartStore.cartsGame.forEach((item, index) => {
    if (item === gameId) {
      cartStore.cartsGame.splice(index, 1)
    }
  })
}

// 去结算按钮
userStore.placeOrder.length = 0
const onSubmit = () => {
  // 将已选择的游戏添加到用户待买的仓库中
  if (userStore.placeOrder.length === 0 && checked.value.length !== 0) {
    userStore.placeOrder.push(...checked.value)
    nextTick(() => {
      router.push('/settlement')
    })
  } else {
    Toast.fail('请先选择商品')
  }
}

// 点击左侧按钮返回上级路由
const onClickLeft = () => {
  history.back()
}

// 所选商品价格
const finalPrice = computed(() => {
  let price = 0
  for (let item of checked.value) {
    price += item.currentPrice
  }
  return price * 100
})
const showPopover = ref(false);
</script>

<style scoped>
.empty {
  margin-top: 50%;
}

.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}

.cart-container {
  margin-top: 46px;
  margin-bottom: 50px;
  background-color: #fff;
}

.bar-1 {
  border-top: 5px solid #f2f3f5;
}

.bar-2 .list-item:not(:last-child) {
  border-bottom: 1px solid #f2f3f5;
}

.game-list .title {
  padding: 12px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #323233;
}

.game-list .list-item {
  padding: 12px 12px;
  display: flex;
}

.game-list .list-item .game-info {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.game-list .list-item .game-info .row-1 .game-name {
  font-size: 15px;
  font-weight: 500;
  line-height: 21px;
  color: #323233;
}

.game-list .list-item .game-info .row-1 .goods-describe {
  margin-top: 3px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #c8c9cc;
}

.game-list .list-item .game-info .row-2 .price-currency {
  font-size: 13px;
  line-height: 19px;
  font-weight: 500;
}

.game-list .list-item .game-info .row-2 .game-price {
  font-size: 17px;
  line-height: 23px;
  font-weight: 500;
}

.delete-button {
  height: 100%;
}
</style>
